<template>
  <div
    v-if="show"
    class="list-ul"
    :class="{ 'wokoo-app-unfold': show }"
    @mouseleave="handleMouseLeave"
  >
    <List :queryName="queryName"></List>
  </div>

  <div
    v-else
    class="octotree-toggle"
    :class="{ 'wokoo-app-fold': !show }"
    @click="handleShow"
    @mouseover="handleMouseOver"
  >
    <span>专栏目录</span>
    <span class="octotree-toggle-icon" role="button"> » </span>
  </div>
</template>
<script>
import List from "./list.vue";
export default {
  name: "app",
  data() {
    return {
      show: false,
      queryName: "/",
    };
  },
  components: {
    List,
  },
  created() {
    this.getQueryName();
  },
  methods: {
    handleShow() {
      console.log("click----", this.show);
      this.show = !this.show;
    },
    handleMouseOver() {
      console.log("==============");
      this.show = true;
      // wokooApp.className = "wokoo-app-unfold";
    },
    handleMouseLeave() {
      console.log("handleMouseLeave::::");
      this.show = false;
      // wokooApp.className = "wokoo-app-fold";
    },
    getQueryName() {
      let pathname = location.pathname;
      let detailRegExp = /^\/p\/\d+/;
      let queryName = "";
      // 专栏详情页
      if (detailRegExp.test(pathname)) {
        let aTage = document.getElementsByClassName(
          "ColumnPageHeader-TitleColumn"
        );
        let url = aTage[0].href;
        queryName = url.slice(url.lastIndexOf("/"));
      } else {
        // 专栏列表页
        // http://zhuanlan.zhihu和http://zhihu/column两种情况都是专栏
        if (pathname.indexOf("/column") === 0) {
          pathname = pathname.slice("/column".length);
        }
        queryName = pathname;
      }
      this.queryName = queryName;
    },
  },
  // render(h) {
  //   return this.show ? (
  //     <ul
  //       className="list-ul"
  //       style={{ height: "100%" }}
  //       on-mouseleave={this.handleMouseLeave}
  //     >
  //       <li>列表</li>
  //     </ul>
  //   ) : (
  //     <div
  //       className="octotree-toggle"
  //       on-click={this.handleShow}
  //       on-ouselver={() => console.log("voer==========")}
  //     >
  //       <span>专栏目录</span>
  //       <span className="octotree-toggle-icon" role="button">
  //         >>
  //       </span>
  //     </div>
  //   );
  // },
};
</script>